<template>
  <div class="row filiter">
    <div v-for="(key,item) in listfilter" class="filiter-condition" :class="filiterClickLabel == key ? 'active': ''"  v-on:click="filiterCheckList(key)">
      {{item.name}}
    </div>
  </div>
  <div class="filiter-content row" v-for="item in processList">
      <div class="col-md-4">
        <div class="filiter-content-img">
          <img v-if="item.url" v-bind:src="item.url">
        </div>
        <div class="filiter-content-name">
          <div class="name">{{item.name}}</div>
          <div>发起时间：{{item.starTime}}</div>
        </div>
      </div>
      <div class="col-md-8 filiter-content-number">
        <div class="col-md-2">
          <div title="{{item.kind}}">{{item.kind}}</div>
          <div>所属应用</div>
        </div>
        <div class="col-md-2">
          <div>{{item.processNum}}</div>
          <div>流程节点</div>
        </div>
        <div class="col-md-2">
          <div>{{item.averageTime}}</div>
          <div title="平均用时排名">平均用时排名</div>
        </div>
        <div class="col-md-2">
          <div>{{item.fast}}</div>
          <div>最快节点</div>
        </div>
        <div class="col-md-2">
          <div>{{item.lowest}}</div>
          <div>最慢节点</div>
        </div>
        <div class="col-md-2">
          <div class="dead">{{item.dead}}</div>
          <div>僵尸节点</div>
        </div>
      </div>
  </div>
  <div class="row">
    <nav>
      <ul class="pagination ">
        <li>
          <a aria-label="Previous" v-on:click="pagePre()">
            <span aria-hidden="true">&lt;</span>
          </a>
        </li>
        <li v-for="(key,item) in pagesize" track-by="$index"><a v-on:click="pageCheck(item,key)" :class="pageCheckLabel == item ? 'active': ''">{{item}}</a></li>
        <li>
          <a aria-label="Next" v-on:click="pageNext()">
            <span aria-hidden="true">&gt;</span>
          </a>
        </li>
      </ul>
      <div class="link-to">
        <span>跳转至</span>
        <div class="page">
          <input type="text" class="form-control" placeholder="" v-model="message">
          <span>页</span>
        </div>
        <button class="btn btn-default" type="submit" v-on:click="pageChange(message)">GO</button>
      </div>
      <div class="page-number">
        <span>共21页，1233条记录，每页显示</span>
        <select name="select" class="select">
          <option value="5">10</option>
          <option value="10">15</option>
          <option value="20">20</option>
        </select>
        <span>条</span>
      </div>
    </nav>
  </div>
</template>
<script>
function getData(url,time,list){
   var self = this;
   $.ajax({ 
    url: url, 
    data:{kind:list,pagesize:"",time:time},
    dataType: "json",
    success: function(data){
      self.listcontent = data.listcontent;
      self.processList = data.processList;
      self.totlePage = data.pageSize; 
      initPageSize(self,data.pageSize);
    },
    error:function(){
      console.log('数据获取失败！！');
    }
  });
};
function initPageSize(self,data){
  var pageNumber = [];
  if (data > 7) {
    for (var i = 1; i <= 5; i++) {
     pageNumber.push(i);
    };
     pageNumber.push('...',data);
  }else if (data <= 7){
    for (var i = 1; i <= data; i++) {
      pageNumber.push(i);
    }
  }
  self.pagesize = pageNumber;
}
export default {
  data () {
    return {
     filiterClickLabel:'',
     listcontent:[],
     filiterListData:'',
     pagesize:'',
     pageCheckLabel:'',
     pagekey:'',
     totlePage:'',
     processList:[]
    }
  },
  props:{
    listfilter:{
      type:Array
    },
    filterurl:{
      type:String
    },
    msg:{
      type:String
    }
  },
  methods: {
   filiterCheckList: function(elName) {
      this.filiterClickLabel = elName; 
    },
    pageCheck:function(elName,key){
      this.pageCheckLabel = elName;
      var lastData = this.pagesize[this.pagesize.length-1];
      var firstData = this.pagesize[2];
      var lastActive = this.pagesize[this.pagesize.length-3]
      var data = [];
      if ((key == "5" && elName == "...") && (lastActive < lastData-4)) {
        this.pageCheckLabel = lastActive;
        data.push("1","...",lastActive,lastActive+1,lastActive+2,"...",lastData);
        this.pagesize = data;
      }else if ((key == "1" && elName == "...") && (firstData > "5")) {
          this.pageCheckLabel = firstData;
          data.push("1","...",firstData-2,firstData-1,firstData,"...",lastData);
          this.pagesize = data;
      }else if((key == "1" && elName == "...") && (firstData == "5"||firstData == "4")){
          this.pageCheckLabel = firstData;
          data.push("1","2","3","4","5","...",lastData);
          this.pagesize = data;
      }else if((key == "5" && elName == "...") && (lastActive >= lastData-4)){
          this.pageCheckLabel = lastActive;
          data.push("1","...",lastData-4,lastData-3,lastData-2,lastData-1,lastData);
          this.pagesize = data;
      };
    },
    pageNext:function(){
      this.pageCheckLabel = parseInt(this.pageCheckLabel)+1;
      var maxPage = this.totlePage;
      var lastData = this.pagesize[this.pagesize.length-1];
      var lastPage = this.pagesize[4];
      var data = [];
      var maxValue = this.pagesize[this.pagesize.length-1];
      debugger
      if((this.pageCheckLabel < maxPage) && (lastPage == this.pageCheckLabel-1)){
          var activePage = this.pageCheckLabel;
          if ((activePage > 5) && (activePage < maxPage-2)) {
            data.push("1","...",activePage-2,activePage-1,activePage,"...",maxValue);
            this.pagesize = data;
          }else if(activePage >= maxPage-2){
            data.push("1","...",maxPage-4,maxPage-3,maxPage-2,maxPage-1,maxPage,);
            this.pagesize = data;
          }
      }else if(this.pageCheckLabel-1 == lastData){
            this.pageCheckLabel = lastData;
          }
    },
    pagePre:function(){
        if (this.pageCheckLabel > "2") {
          var data = [];
          var maxPage = this.totlePage;
          this.pageCheckLabel = parseInt(this.pageCheckLabel)-1;
          var leftPage = this.pagesize[2];
          var pageNumber = this.pageCheckLabel;
          if ((pageNumber == leftPage - 1) && (pageNumber > "3")) {
            data.push("1","...",pageNumber,pageNumber+1,pageNumber+2,"...",maxPage);
            this.pagesize = data;
          }else if(pageNumber == "3"){
            data.push("1","2",pageNumber,pageNumber+1,pageNumber+2,"...",maxPage);
            this.pagesize = data;
          }else if (pageNumber == "2"){
            data.push("1",pageNumber,pageNumber+1,pageNumber+2,pageNumber+3,"...",maxPage);
            this.pagesize = data;
          }
        }else if(this.pageCheckLabel == "2"){
          this.pageCheckLabel = "1";
        }
    },
    pageChange:function(page){
      var data =[];
      var page = parseInt(page);
      var lastData = this.pagesize[this.pagesize.length-1];
      var letterPage = lastData-4;
      if (page > 5 && page < letterPage) {
        data.push("1","...",page-1,page,page+1,"...",lastData);
        this.pagesize = data;
        this.pageCheckLabel = page;
      }else if(page > 0 && page <= 5){
        data.push("1","2","3","4","5","...",lastData);
        this.pagesize = data;
        this.pageCheckLabel = page;
      }else if (page >=letterPage && page <= lastData) {
        data.push("1","...",lastData-4,lastData-3,lastData-2,lastData-1,lastData);
        this.pagesize = data;
        this.pageCheckLabel = page;
      }
    }
  },
  ready(){
    var self = this;
    self.filiterClickLabel = "0";
    self.pageCheckLabel = '1';
    getData.call(self,self.filterurl,self.msg,self.filiterListData);
    self.$watch('filiterListData', function() {
       getData.call(self,self.filterurl,self.msg,self.filiterListData)
    }); 
  },
  watch: {
    'msg': function(val,oldval) {
      getData.call(this,this.filterurl,this.msg,this.filiterListData);
    }
  }
}
</script>

<style scoped>
div.row{
  margin-left: 0;
  margin-right: 0;
}
div.filiter{
  border:1px solid #e7eaee; 
  background-color:#f9faff;
  margin: 16px 0;
  border-radius: 12px;
  color: #767E85;
}
.filiter-condition{
  float:left;
  padding: 12px 20px;
  border-right: 1px solid #e7eaee;
  cursor: pointer;
}
div.filiter-condition:hover{
  background-color: #ffffff;
  color: #4ed5d6;
}
div.filiter-condition:first-child{
  border-top-left-radius:12px;
  border-bottom-left-radius:12px;
}
div.filiter .active{
  background-color: #ffffff;
  color: #4ed5d6;
}
div.filiter-content{
  background-color: #ffffff;
  padding: 8px 20px;
  border-radius: 10px;
  margin-bottom: 8px;
}
div.filiter-content img{
  max-width: 50px;
}
div.filiter-content-img,
div.filiter-content-name{
  display: inline-block;
  vertical-align: middle;
}
div.filiter-content-img{
  margin-right: 24px;
}
.filiter-content-name .name{
  font-size: 16px;
  color: #767E85;
}
.filiter-content-name .abnormal{
    color:#fcbc22;
}
.filiter-content-name .start{
    color:#37c71f;
}
.filiter-content-name .stop{
    color:#fd8181;
}
.filiter-content-number{
  text-align: center;
}
.filiter-content-number .col-md-3,
.filiter-content-number .col-md-2{
  border-left: 1px solid #e7eaee;
}
.filiter-content-number .col-md-3:first-child,
.filiter-content-number .col-md-2:first-child{
  border-left: none;
}
.filiter-content-number .col-md-2 div:first-child,
.filiter-content-number .col-md-2 div:last-child{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.filiter-content-number .col-md-3 div:first-child,
.filiter-content-number .col-md-2 div:first-child{
  color: #767E85;
  line-height: 24px;
}
.filiter-content-number .col-md-3 div:last-child,
.filiter-content-number .col-md-2 div:last-child{
  font-size: 14px;
  color: #bdcad2;
  line-height: 24px;
}
.filiter-content-name div:last-child{
  color: #bdcad2;
}
.pagination{
  margin:8px 0;
  color: #767E85;
}
.pagination > li>a{
  background-color: #f9faff;
  border:1px solid #e7eaee;
  color: #767E85;
  padding: 12px 18px;
  cursor: pointer;
}
.pagination > li:first-child a{
  border-top-left-radius:12px;
  border-bottom-left-radius:10px;
}
.pagination > li:last-child a{
  border-top-right-radius:12px;
  border-bottom-right-radius:10px;
}
.pagination > li>a:hover,
.pagination > li .active{
  background-color: #2ACDCF;
  color: #fff;
}
.link-to{
  display: inline-block;
  color: #767E85;
  position: relative;
  top: -23px;
  left: 16px;
}
.link-to .form-control{
  width: 55px;
  border-radius: 10px;
  height: 40px;
  border:1px solid #e7eaee;
  box-shadow: none;
}
.link-to .form-control:focus{
   border:1px solid #2ACDCF;
}
.link-to span,
.link-to .page{
  display: inline-block;
  margin-right: 8px;
}
.link-to .page input{
  float: left;
  margin-right: 4px;
  position: relative;
  top:-12px;
}
.link-to button{
  background-color: #f9faff;
  color:  #767E85;
  border:1px solid #e7eaee;
  border-radius: 10px;
}
.link-to button:hover{
  background-color: #fff;
}
.page-number{
  color:  #767E85;
  float: right;
  position: relative;
  top: 14px;
}
.page-number .select{
  border:1px solid #e7eaee;
  font-size: 14px;
  cursor: pointer;
  margin-left: 8px;
  width: 52px;
  padding-left: 8px;
  height: 34px;
  border-radius: 10px;
}
.page-number .select:focus{
  border-radius: 10px;
  border:none;
  outline: none;
}
.filiter-content-number .dead{
  color: #FD5757!important;
}
</style>
